<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
           
            text-align: center;
        }
        div{
            display:flex;
           
        }
        table,tr,td{
            text-align: center;
            margin: auto;
            border: 1px solid black;
            border-collapse: collapse;
        }
        table{
            width:98vw;
            
        }
    </style>
</head>
<body>
    <h1>学员管理系统</h1>
    <div><button>全选</button>
        <button>添加</button>
        <button>删除</button>
    </div>
<table>
    <thead>
        <tr>
            <td></td>
            <td>ID</td>
            <td>名字</td>
            <td>年龄</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>张三</td>
            <td>17</td>
            <td>男</td>
            <td><button>修改</button><button>删除</button></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
            <td>李四</td>
            <td>17</td>
            <td>女</td>
            <td><button>修改</button><button>删除</button></td>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">班级共有学员：<span id="total"></span></td>
            <td colspan="3">平均年龄: <span id="avg"></span></td>
        </tr>
    </tfoot>
</table>
</body>
<script src="chao3.js"></script>
</html>